<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
  {
    style: {
      navigationStyle: 'custom',
      navigationBarTitleText: '总佣金',
      "enablePullDownRefresh": false,
    },
  }
  </route>
<template>
  <view class="bg-[#f4f4f4] min-h-[100vh]">
    <grayHeader title="总佣金">
      <view class="h-[246rpx] rounded-sm bg-white mt-5 mx-[20rpx] flex flex-col justify-center items-center">
        <view class="text-[#9A9A9A] text-[22rpx]">我的总佣金</view>
        <view class="text-base font-bold text-[38rpx] mt-[26rpx]">{{ userStore.userInfo.total_earnings || 0 }}</view>
      </view>
    </grayHeader>

    <view class="-mt-11 mx-[20rpx] bg-white rounded-sm overflow-hidden">
      <view class="border-b border-b-solid border-[#EDEDED] text-base text-[30rpx] p-4 font-bold">佣金明细</view>
      <k-list :loading="loading" :is-empty="!list.length">

        <view class="mt-4">
          <members v-for="(item, index) in list" :key="index" :user="item">
            <view class="ml-auto text-right">
              <view class="text-[#0D0D0D] text-sm font-bold">{{ item.change_amount }}</view>
              <view class="text-[#646466] text-xs mt-1">{{ item.type_desc }}</view>
            </view>
          </members>
        </view>

      </k-list>

    </view>
  </view>
</template>

<script setup>
import grayHeader from "./components/gray-header.vue";
import members from "./components/members.vue";
import useReachBottomLoadMore from "@/hooks/useReachBottomLoadMore";
import { fetchIntegralDetails } from "@/service/user";
import useUserStore from "@/store/user";
const userStore = useUserStore();
const requestParams = computed(() => {
  return {
    type: "bw"
  };
});

const { data: list, loading, run } = useReachBottomLoadMore(fetchIntegralDetails, requestParams);


onLoad(() => {
  run(requestParams.value);
})

</script>

<style lang="scss" scoped></style>
